<template>
	<div class="btn">
		<template>
			<yd-slider autoplay="3000">
				<yd-slider-item>
					<a>
						<img src="../../static/images/1.jpg">
					</a>
				</yd-slider-item>
				<yd-slider-item>
					<a>
						<img src="../../static/images/2.jpg">
					</a>
				</yd-slider-item>
				<yd-slider-item>
					<a>
						<img src="../../static/images/3.jpg">
					</a>
				</yd-slider-item>
			</yd-slider>
		</template>
		<div class="sp_list">
			<h1 class="name">{{iPhone6S.name}}</h1>
			<p class="desc">描述:<span>{{iPhone6S.desc}}</span></p>
			<p class="desc">价格:<span>{{iPhone6S.price}}</span></p>

			<!--外观-->
			<ul>
                <li v-for="styleUrl in iPhone6S.style"
                 @click="changeStyle($key, styleUrl)"
                 :class="{active: iPhone6S.activeStyleUrl == styleUrl}">
				 <span v-text="$key"></span>
				 </li>
            </ul>
		</div>
	</div>
</template>

<script>
	import store from '@/vuex/store'
	import { mapState } from 'vuex';
	export default {
		name: 'index',
		data() {
			return {
				 activeStyle: '',
			}
		},
		computed:{
			...mapState(['iPhone6S'])
		},
		store
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}
	
	ul {
		list-style-type: none;
		padding: 0;
	}
	
	li {
		display: inline-block;
		margin: 0 10px;
	}
	
	a {
		color: #42b983;
	}
	img{
		height: 300px;
	}
	.sp_list{
		margin-top: .3rem;
		margin-left: .3rem;
	}
	.name{
		font-size:.4rem;
		text-align: center;
	}
	.desc{
		margin-top: .3rem;
		text-align: center;
		color: #555;
		font-size: .25rem;
	}
</style>